<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>医院管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form
      :model="queryParams"
      ref="queryParams"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="医院名" prop="hospitalId">
        <el-input
          v-model="queryParams.hospitalName"
          placeholder="请输入医院名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="医院地址" prop="hospitalAddress">
        <el-input
          v-model="queryParams.hospitalAddress"
          placeholder="请输入医院地址"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="医院电话" prop="hospitalPhone">
        <el-input
          v-model="queryParams.hospitalPhone"
          placeholder="请输入医院电话"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <!--修改对话框-->
    <el-row :gutter="12">
      <el-col :span="6">
        <el-button type="success" icon="el-icon-plus" @click="addDialog"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <!--表格列表-->
    <el-table :data="tableData">
      <el-table-column prop="hospitalId" label="医院id"></el-table-column>
      <el-table-column prop="hospitalName" label="医院名称"></el-table-column>
      <el-table-column
        prop="hospitalAddress"
        label="医院地址"
      ></el-table-column>
      <el-table-column prop="hospitalPhone" label="医院电话"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="success" @click="getOne(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.pageNum"
      :page-size="queryParams.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      :total="queryParams.total"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <!--修改对话框-->
    <el-dialog
      :visible.sync="editFlag"
      :close-on-click-modal="false"
      title="修改医院信息"
    >
      <el-form>
        <el-form-item label="医院id">
          <el-input v-model="hospital.hospitalId" disabled></el-input>
        </el-form-item>
        <el-form-item label="医院名称">
          <el-input
            v-model="hospital.hospitalName"
            placeholder="请输入医院名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="医院地址">
          <el-input
            v-model="hospital.hospitalAddress"
            placeholder="请输入医院地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="医院电话">
          <el-input
            v-model="hospital.hospitalPhone"
            placeholder="请输入医院地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFlag = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <!--添加对话框-->
    <el-dialog
      :visible.sync="addFlag"
      :close-on-click-modal="false"
      title="添加医院信息"
    >
      <el-form>
        <el-form-item label="医院名称">
          <el-input
            v-model="hospital.hospitalName"
            placeholder="请输入医院名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="医院地址">
          <el-input
            v-model="hospital.hospitalAddress"
            placeholder="请输入医院地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="医院电话">
          <el-input
            v-model="hospital.hospitalPhone"
            placeholder="请输入医院地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFlag = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  hospitalList,
  deleteHospital,
  getOneHospital,
  saveHospital,
  updateHospital,
} from "../../api/api";

export default {
  data() {
    return {
      addFlag: false, // 显示添加对话框的标记
      editFlag: false,
      tableData: [],
      showSearch:true,//可以关了加钱再加
      queryParams: {
        pageSize: 10,
        pageNum: 1,
      },
      listHospital: [],
      hospital: {
        hospitalId: null,
        hospitalName: null,
        hospitalAddress: null,
        hospitalPhone: null,
      },
    };
  },
  methods: {
    addDialog() {
      this.addFlag = !this.addFlag;
    },
    getOne(row) {
      this.editFlag = !this.editFlag;
      getOneHospital(row.hospitalId).then((response) => {
        if (response.code === 200) {
          this.hospital = response.data;
        } else {
          this.$message.error("接口出错");
        }
      });
    },
    deleteUser(row) {
      deleteHospital(row.consultationAnnouncementId).then((response) => {
        if (response.code === 200) {
          this.$message.success(response.msg);
          this.hospitals();
        } else {
          this.$message.error(response.msg);
        }
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.hospitals();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryParams");
      this.handleQuery();
    },
    update() {
      //前端校验,加钱才做
      //发送请求到后端
      updateHospital(this.hospital).then((response) => {
        if (response.code === 200) {
          this.$message.success(response.msg);
          this.hospitals();
          this.editFlag = false;
        } else {
          this.$message.error(response.msg);
        }
      });
    },
    save() {
      saveHospital(this.hospital).then((response) => {
        if (response.code === 200) {
          this.$message.success(response.msg);
          this.hospitals();
          this.addFlag = false;
        } else {
          this.$message.error(response.msg);
        }
      });
    },

    handleCurrentChange(val) {
      console.info("改变分页起始数据" + val);
      this.queryParams.pageNum = val;
      this.hospitals();
    },
    handleSizeChange(val) {
      console.info("改变每页显示的最大条数" + val);
      this.queryParams.pageSize = val;
      this.hospitals();
    },
    hospitals() {
      hospitalList(this.queryParams).then((response) => {
        if (response.code === 200) {
          this.$message.success(response.msg);
          this.tableData = response.rows;
          this.queryParams.total = response.total;
        } else {
          this.$message.error(response.msg);
        }
      });
    },
  },
  created() {
    console.log(666);
    this.hospitals();
  },
};
</script>

<style>
.el-breadcrumb {
  padding-bottom: 12px;
}
.el-pagination {
  padding-top: 12px;
}
</style>
